<template>
  <div v-if="cartList.length > 0">
    <div v-for="item in cartList" :key="item.id" class="goods-item">
      <div class="left">
        <input type="checkbox" v-model="item.checked" />
      </div>
      <div class="middle">
        <img style="width: 100px; height: 100px" :src="item.img" alt="" />
      </div>
      <div class="right">
        <div class="name">{{ item.name }}</div>
        <div class="price-num">
          <span>￥{{ item.price }}</span>
          <div>
            <button>-</button>
            {{ item.num }}
            <button>+</button>
          </div>
        </div>
      </div>
      <div class="last">
        <button>删除</button>
      </div>
    </div>
  </div>
  <div v-else>还没有商品，赶快去看看吧</div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    /**
     * 参数1：模块名
     * 参数2：购物车列表
     */
    ...mapState('cart', ['cartList'])
  }
}
</script>

<style scoped>
.goods-item {
  height: 120px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e3e3e3;
}
.left {
  width: 80px;
}
.middle {
  width: 120px;
}
.right {
  flex: 1;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.price-num {
  display: flex;
  justify-content: space-between;
}
.last {
  width: 100px;
  margin-left: 30px;
}
</style>
